let { $, table, layer, form, upload } = layui;
export default class Add {
    constructor() {
        this.render();
        this.handle();
    }
    render() {
        let str = ` <script type="text/html" id="adduers">
        <form class="layui-form" style="width:400px" action="#" lay-filter="student">

        <!-- 头像 -->
        <div class="layui-form-item">
            <label class="layui-form-label">头像</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="uploadBtn">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
                <img id="headImg" width="80" height="100" />
                <input type="hidden" name="headImg" >
            </div>
        </div>

            <!-- 账户框 -->
            <div class="layui-form-item">
                <label class="layui-form-label">账号</label>
                <div class="layui-input-block">
                    <input id="addname" type="text" name="username" style="width: 200px;" required lay-verify="username" placeholder="请输入名字"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <!-- 密码框 -->
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input id="addage" type="text" name="pwd" style="width: 200px;" required lay-verify="pass" placeholder="请输入密码"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <!-- 手机号 -->
            <div class="layui-form-item">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" style="width: 200px;" required lay-verify="pass" placeholder="请输入手机号"
                    autocomplete="off" class="layui-input">
                </div>
            </div>
            <!-- 电子邮箱 -->
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-block">
                        <input type="text" name="email" style="width: 200px;" required lay-verify="pass" placeholder="请输入电子邮箱"
                        autocomplete="off" class="layui-input">
                    </div>
            </div>
            <div class="layui-form-item">
            <label class="layui-form-label">管理人员</label>
                <div class="layui-input-block">
                    <input type="radio" name="privilege" value="1" title="是">
                    <input type="radio" name="privilege" value="0" title="否">
                </div>
            </div>
        </form>
        </script>`;
        $("#addStudentTemplate").html(str);
    };
    handle() {
        layer.open({
            type: 1,
            btn: ["确定", "取消"],
            title: "添加用户信息",
            success: function () {
                // 上传头像
                upload.render({
                    elem: "#uploadBtn",
                    url: "/upload",
                    done(res) {
                        $("#headImg").attr("src", "/image/" + res.filename);
                        $("[name=headImg]").val(res.filename);
                    }
                });
                form.render();
            },
            content: $("#adduers").html(),
            yes: function (index) {
                $.ajax({
                    type: "post",
                    url: "users/add",
                    data: form.val("student"),
                    success: function (res) {
                        let state = typeof res.data;
                        if (state == "object") {
                            layer.msg("添加成功");
                            layer.close(index);
                            table.reload("studentsTable", { where: "" });
                        } else {
                            layer.msg("账号或密码不能为空");
                            layer.close(index);
                            table.reload("studentsTable", { where: "" });
                        }
                    }
                })
            }
        })
    };
}